<!DOCTYPE html>
<html lang="en">
    <head>
        {% include head.html %}
        <title>{{ site.title }}</title>
        <link rel="stylesheet" href="{{ site.baseurl }}/css/landing.css">
        <link rel="stylesheet" href="{{ site.baseurl }}/css/fonts_responsive.css">
    </head>
    <body>
        <div class="container p-5">
            <img class="d-block mx-auto" id="logo" src="{{ site.baseurl }}/static/icon_foreground.png" alt="Logo">
            <div class="text-center">
                <h1 id="title" class="display-2 font-weight-bold mt-2">{{ site.title }}</h1>
                {{ content }}
            </div>
            <div class="text-center">
                <a class="btn rounded-pill px-3 py-2 mx-2 mt-2" href="{{ site.baseurl }}/home">Documentation</a>
                <a class="btn rounded-pill px-3 py-2 mx-2 mt-2" href="{{ site.baseurl }}/about/changelog">Changelog</a>
                <a class="btn rounded-pill px-3 py-2 mx-2 mt-2" href="https://github.com/{{ site.author.github }}/{{ site.github_repo }}">GitHub</a>
                <a class="btn rounded-pill px-3 py-2 mx-2 mt-2" href="{{ site.baseurl }}/extra/donate">Support</a>
            </div>
            <br/>
            <div class="row">
                {% assign col = 12 | divided_by: site.screenshots.size %}
                {% for screenshot in site.screenshots %}
                <div class="col-12 col-sm-{{ col }} mt-4">
                    <img class="img-fluid" src="{{ site.baseurl }}/static/{{ screenshot }}" alt="Screenshot">
                </div>
                {% endfor %}
            </div>
        </div>
    </body>
</html>
